import { useMemo, useState } from 'react';
import { YmTable, YmTablePorps } from 'ym-design';

// 表格字段类型
type TableRecord = {
  name: string;
  age: number;
  gender: '男' | '女';
  email: string;
  address: string;
  create_time: string;
  guid: string;
};
// 查询字段类型
type SearchValue = {
  name: string;
  gender: string;
};

const mockData = new Array(100).fill(1).map<TableRecord>((v, index) => {
  return {
    name: `用户${index}`,
    age: Math.floor(Math.random() * 100),
    gender: Math.random() > 0.6 ? '女' : '男',
    email: Math.random() + '@abc.com',
    address: `地址${index}`,
    create_time: '随机时间',
    guid: `dasklfjaf${index}`,
  };
});

export default function () {
  const defaultColumns = useMemo<
    YmTablePorps<TableRecord, SearchValue>['columns']
  >(
    () => [
      {
        dataIndex: 'name',
        title: '姓名',
        key: 'name',
        fixed: 'left',
        width: 80,
      },
      {
        dataIndex: 'age',
        title: '年龄',
        key: 'age',
        width: 100,
      },
      {
        dataIndex: 'gender',
        title: '性别',
        key: 'gender',
        width: 80,
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        key: 'email',
        width: 300,
      },
      {
        dataIndex: 'address',
        title: '地址',
        key: 'address',
        width: 300,
      },
      {
        dataIndex: 'create_time',
        title: '创建时间',
        key: 'create_time',
        width: 300,
      },
    ],
    [],
  );

  const [columns, setColumns] =
    useState<YmTablePorps<TableRecord, SearchValue>['columns']>(defaultColumns);

  //列显示回调函数
  const handleColumnsChage = (newColumns: any[], type: any) => {
    if (type.type !== 'reset') {
      setColumns(newColumns);
    } else {
      setColumns(defaultColumns);
    }
  };

  return (
    <YmTable<TableRecord, SearchValue>
      columns={columns}
      rowKey="guid"
      searchForm={{
        formItems: [
          {
            name: 'name',
            label: '名称',
            valueType: {
              type: 'input',
            },
          },
        ],
      }}
      toolBar={{
        onColumnsChange: handleColumnsChage,
      }}
      tabs={{
        items: [
          {
            label: '全部',
            key: '',
          },
          {
            label: '男',
            key: '男',
          },
          {
            label: '女',
            key: '女',
          },
        ],
      }}
      request={async ({ page = {} }, searchValue, tabs) => {
        const { pageIndex = 1, pageSize = 10 } = page;
        await new Promise((resolve) => {
          setTimeout(() => resolve(1), 2000 * Math.random());
        });

        const start = (pageIndex - 1) * pageSize;
        const end = start + pageSize;

        let result = mockData
          .filter((v) => {
            return (
              v.name.includes(searchValue?.name ?? '') &&
              v.gender.includes(tabs?.key ?? '')
            );
          })
          .map((v) => ({ ...v }));

        return {
          list: result.slice(start, end),
          total: result.length,
        };
      }}
    />
  );
}
